<script setup lang="ts">
import SysDialog from "@/components/SysDialog/index.vue";
import useAssignRole from '@/composables/system/user/useAssignRole';
import useDialog from '@/hooks/useDialog';
// 弹框
const { dialog, onShow, onClose } = useDialog()

const { onConfirm, show, roleList, roleParams, sizeChange, currentChange, tableHeight, selectRoleId, getSelectRole, cellClickHandle } = useAssignRole(dialog, onShow, onClose)

// 暴露方法给外部使用
defineExpose({
    show
})

</script>
<template>
    <SysDialog :title="dialog.title" :width="dialog.width" :height="500" :visible="dialog.visible" @onClose="onClose"
        @onConfirm="onConfirm">
        <template v-slot:content>
            <!-- 角色列表 -->
            <el-table size="small" :height="tableHeight" :data="roleList.list" border stripe
                @row-click="cellClickHandle">
                <el-table-column width="80" align="center" label="选择">
                    <template #default="scope">
                        <el-radio v-model="selectRoleId" :label="scope.row.id" @change="getSelectRole(scope.row.id)">{{
                                ""
                        }}</el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="role_name" label="角色名称"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="sizeChange" @current-change="currentChange"
                :current-page.sync="roleParams.current_page" :page-sizes="[8, 20, 40, 80, 100]"
                :page-size="roleParams.page_size" layout="total, sizes, prev, pager, next, jumper"
                :total="roleParams.total" background></el-pagination>
        </template>
    </SysDialog>
</template>
<style lang="scss" scoped>
.el-pagination {
    margin-top: 10px;
}

.el-radio {
    height: 30px;
}
</style>